<template>
  <div class="clearfix">
    <a-upload
      :action="this.$baseURL+'/pc/common/uploadImg'"
      listType="picture-card"
      :fileList="fileList"
      @preview="handlePreview"
      @change="handleChange"
    >
      <div v-if="fileList.length < 3">
        <a-icon type="plus" />
        <div class="ant-upload-text">Upload</div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        previewVisible: false,
        previewImage: '',
        fileList: [],
      }
    },
    methods: {
      handleCancel () {
        this.previewVisible = false
      },
      handlePreview (file) {
        alert(file.url)

        this.previewImage = file.url || file.thumbUrl
        this.previewVisible = true
      },
      handleChange (info) {
        //console.log(info)
        this.fileList = info.fileList
        if (info.file.status === 'done') {
          this.fileList.pop()
          this.fileList.push(info.file.response)
          this.$message.success(`${info.file.name} 上传成功`);
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} 上传失败`);
        } else if (info.file.status === 'removed') {
          alert(info.file.uid)
        }
      },
    },
  }
</script>
<style>
  /* you can make up upload button and sample style by using stylesheets */
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>
